<script>
/**
 * @param {obejct} schema
 *** @param type 类型，有三种类型 defalut | obejct | array
 *** @param widget 部件，这里引入了大部分使用到的部件，具体参考widgets下的文件夹
 *** @param description 描述信息
 *** @param itemAttrs ElFomItem的属性，具体可以参考el-form-item的属性
 *** @param widgetAttrs widget的属性，具体可以参考各个form表单组件的属性
 *** @param options widget为select，checkbox, radio的列表值
 *** @param gutter 当type为array或者object是，每项的间距
 *** @param isToggle 是否展开收缩下列表单
 *** @type 当type 为 object 时才生效的属性
 ******* @param childLabelWidth 子级formItem label的宽度
 ******* @param gutter 子级formItem 之间的距离
 ******* @param layout 一行显示子级formItem的个数
 *** @type 当type 为 array 时才生效的属性
 ******* @param initialState 新增初始值, 有两种类型 string | object
 ******* @param construction 表单结构，当 initialState 为 object 时，每个属性对应的表单部件
 ******* @param gutter 间距，当 initialState 为 object 时，每个属性对应的表单部件
 *** @param {object} data  表单数据
 *** @param {object} rules  表单验证规则
 *** @returns {object} 表单数据
 */
import { ElForm, ElFormItem } from 'element-plus'
import { renderForm } from './render'
import { ref } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ElConfigProvider } from 'element-plus'
export default {
  name: 'BaseForm',
  components: {
    ElForm,
    ElFormItem,
    ElConfigProvider
  },
  props: {
    schema: Object,
    data: Object,
    rules: Object
  },
  emits: ['submit', 'reset'],
  setup(props, { attrs, slots, emit, expose }) {
    const elRef = ref(null)
    const submit = (cb) => {
      console.log(elRef.value)
      elRef.value.validate((valid) => {
        if (valid) {
          emit('submit')
          cb && typeof cb === 'function' && cb()
        }
      })
    }

    const reset = () => {
      elRef.value.resetFields()
      emit('reset')
    }

    expose({
      submit,
      reset
    })

    return () => {
      const { schema, data, rules } = props
      return (
        <el-config-provider locale={zhCn}>
          <el-form
            {...attrs}
            rules={rules}
            model={data}
            className="base--form"
            ref={elRef}
          >
            {renderForm(schema, data)}
            <el-form-item>
              {slots.default ? (
                slots.default()
              ) : (
                <>
                  <el-button type="primary" onClick={submit}>
                    提交
                  </el-button>
                  <el-button onClick={reset}>重置</el-button>
                </>
              )}
            </el-form-item>
          </el-form>
        </el-config-provider>
      )
    }
  }
}
</script>

<style lang="scss">
.base--form {
  .el-select {
    width: 100%;
  }
  .form-item-content {
    display: flex;
    align-items: flex-end;
    // .widget-wrap {
    //   flex: 1;
    // }
    .desc-info {
      margin-left: 12px;
    }
  }
}
</style>
